import React, { useState } from 'react'
import { Card, Table, Button, Modal, Form, Input, Select, DatePicker, Space, Tag, Progress, Timeline, Upload } from 'antd'
import { PlusOutlined, EyeOutlined, EditOutlined, CameraOutlined, QrcodeOutlined } from '@ant-design/icons'
import Layout from '../components/Layout/Layout'

const { Option } = Select
const { TextArea } = Input

export default function Inspection() {
  const [inspectionPlans, setInspectionPlans] = useState([
    {
      id: 1,
      name: '消防设备巡检',
      type: 'safety',
      frequency: 'weekly',
      nextDate: '2024-01-20',
      status: 'active',
      assignee: '张三',
      checkpoints: 15,
      completedCount: 12
    }
  ])

  const [inspectionRecords, setInspectionRecords] = useState([
    {
      id: 1,
      planName: '消防设备巡检',
      inspector: '张三',
      startTime: '2024-01-15 09:00',
      endTime: '2024-01-15 11:30',
      status: 'completed',
      score: 95,
      issues: 2,
      photos: 8
    }
  ])

  const [activeTab, setActiveTab] = useState('plans')
  const [modalVisible, setModalVisible] = useState(false)
  const [detailVisible, setDetailVisible] = useState(false)
  const [selectedRecord, setSelectedRecord] = useState(null)

  const planColumns = [
    { title: '巡检计划', dataIndex: 'name', key: 'name' },
    { 
      title: '类型', 
      dataIndex: 'type', 
      key: 'type',
      render: (type) => {
        const colors = { safety: 'red', equipment: 'blue', environment: 'green' }
        const names = { safety: '安全', equipment: '设备', environment: '环境' }
        return <Tag color={colors[type]}>{names[type]}</Tag>
      }
    },
    { title: '频率', dataIndex: 'frequency', key: 'frequency' },
    { title: '下次巡检', dataIndex: 'nextDate', key: 'nextDate' },
    { title: '负责人', dataIndex: 'assignee', key: 'assignee' },
    { 
      title: '进度', 
      key: 'progress',
      render: (_, record) => (
        <Progress 
          percent={Math.round((record.completedCount / record.checkpoints) * 100)} 
          size="small" 
        />
      )
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space>
          <Button size="small" icon={<EyeOutlined />}>查看</Button>
          <Button size="small" icon={<EditOutlined />}>编辑</Button>
          <Button size="small" type="primary">开始巡检</Button>
        </Space>
      )
    }
  ]

  const recordColumns = [
    { title: '巡检计划', dataIndex: 'planName', key: 'planName' },
    { title: '巡检员', dataIndex: 'inspector', key: 'inspector' },
    { title: '开始时间', dataIndex: 'startTime', key: 'startTime' },
    { title: '结束时间', dataIndex: 'endTime', key: 'endTime' },
    { 
      title: '状态', 
      dataIndex: 'status', 
      key: 'status',
      render: (status) => {
        const colors = { completed: 'green', in_progress: 'blue', pending: 'orange' }
        const names = { completed: '已完成', in_progress: '进行中', pending: '待开始' }
        return <Tag color={colors[status]}>{names[status]}</Tag>
      }
    },
    { title: '评分', dataIndex: 'score', key: 'score' },
    { title: '问题数', dataIndex: 'issues', key: 'issues' },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space>
          <Button 
            size="small" 
            icon={<EyeOutlined />}
            onClick={() => {
              setSelectedRecord(record)
              setDetailVisible(true)
            }}
          >
            详情
          </Button>
        </Space>
      )
    }
  ]

  return (
    <Layout>
      <div style={{ padding: '24px' }}>
        <Card 
          title="智能巡检管理"
          tabList={[
            { key: 'plans', tab: '巡检计划' },
            { key: 'records', tab: '巡检记录' },
            { key: 'analytics', tab: '巡检分析' }
          ]}
          activeTabKey={activeTab}
          onTabChange={setActiveTab}
          extra={
            <Button 
              type="primary" 
              icon={<PlusOutlined />}
              onClick={() => setModalVisible(true)}
            >
              新建巡检计划
            </Button>
          }
        >
          {activeTab === 'plans' && (
            <Table
              columns={planColumns}
              dataSource={inspectionPlans}
              rowKey="id"
            />
          )}
          
          {activeTab === 'records' && (
            <Table
              columns={recordColumns}
              dataSource={inspectionRecords}
              rowKey="id"
            />
          )}

          {activeTab === 'analytics' && (
            <div>
              {/* 巡检分析图表 */}
              <p>巡检分析功能开发中...</p>
            </div>
          )}
        </Card>

        {/* 巡检详情模态框 */}
        <Modal
          title="巡检详情"
          open={detailVisible}
          onCancel={() => setDetailVisible(false)}
          footer={null}
          width={800}
        >
          {selectedRecord && (
            <div>
              <Timeline>
                <Timeline.Item color="green">
                  <p>巡检开始 - {selectedRecord.startTime}</p>
                </Timeline.Item>
                <Timeline.Item color="blue">
                  <p>检查点1: 消防栓 - 正常</p>
                </Timeline.Item>
                <Timeline.Item color="red">
                  <p>检查点2: 灭火器 - 发现问题：压力不足</p>
                </Timeline.Item>
                <Timeline.Item color="green">
                  <p>巡检完成 - {selectedRecord.endTime}</p>
                </Timeline.Item>
              </Timeline>
            </div>
          )}
        </Modal>
      </div>
    </Layout>
  )
}